<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>

<style type="text/css">
.weui-cells{
	border:1px solid #f5f5f5;
	border-radius: 0.8rem;
	margin: 10px;
}
.weui-flex a {
	color: #000;
}

.activityJPG img {
	height: 30%;
	width: 100%;
}

.titleleft {
	margin-left: 15px;
	font-family: SimSun;
	font-weight: bold;
}

.tab-horizontal li.active>span {
	border-bottom: 3px solid #ea693f !important;
	color: !important;
}

.tab-horizontal li>span {
	display: inline !important;
	width: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.guangboPNG {
	position: absolute;
	margin-top: 15px;
	margin-left: 18px;
	color: #ff0000;
	background-color: #A52A2A;
	border-radius: 0.5rem;
}

.guangboPNG>img {
	height: 15px;
	width: 14.7px;
	padding-left: 3px;
}

.guangboPNG>span {
	font-size: 13px;
	color: #FFFFFF;
}

.weui-flex {
	color: gray;
}

.titlecontent {
	margin:10px;

	border-radius: 0.5rem;
}

#progressbar .ui-progressbar-value {
	background-color: #ccc;
}

/* 赚取金豆 */
.topBox {
	background-image: url('<c:url value='/images/we/activity/tasktopbackground.jpg ' />');
	background-size: 100% 100%;
	padding-top: 40px;
}

.topImg {
	width: 80px;
	height: 60px;
}

.icon_img {
	width: 40px;
	height: 40px;
	padding-right: 10px;
}

.avtiveBtn {
	border: solid 1px #ff7325;
	padding: 5px 10px;
	border-radius: 5px;
	color: #999999;
}

.avtiveBtn_active {
	background-color: #ff7325 !important;
	color: #ffffff !important;
}

.color_red {
	color: #ff7325;
	font-size: 0.6rem;
}

.color_blue {
	color: #1fa0db;
	font-size: 1.1rem;
}

.font_bold {
	font-weight: bold;
	color: #555555;
}

.allNum {
	position: relative;
	width: 80%;
	height: 3px;
	margin-top: 0.6rem;
	border-radius: 15px;
	display: inline-block;
	background-color: #000000;
}


</style>

<c:if test="${empty hotActivitys}">
	<div class="weui-panel_body" style="text-align: center;">
		<img alt="" src="<c:url value='/images/we/personCenter/null.png' />">
		<p style="margin: 5px 20px; color: #afafaf">当前板块暂无活动</p>
	</div>
</c:if>
<c:forEach items="${hotActivitys}" var="hotActivitys">

	<a onclick="toDetail()"> 
		<input type="hidden" name="actiUrl" id="actiUrl" value="${hotActivitys.actiUrl}" /> 
		<input type="hidden" name="id" id="id" value="${hotActivitys.id}" /> 
		<input type="hidden" name="name" id="name" value="${hotActivitys.name}" /> 
		<input type="hidden" name="signs" id="signs" value="${hotActivitys.signs}" /> 
		<input type="hidden" name="leastReward" id="leastReward" value="${hotActivitys.leastReward}" />
		<div class="weui-cells">
			<div>
				<img style="width: 100%" alt="" src="<c:url value='${tfn:getFileUrl(hotActivitys.actiImg) }' />">
			</div>
			<div class="weui-flex titlecontent">
				<div class="weui-flex__item" style="text-align: left;">
					<c:if test="${hotActivitys.leastReward >='0'}">
						<p class="timeChange"></p>
					</c:if>
					<c:if test="${hotActivitys.leastReward <'0'}">
						<p>该活动已结束</p>
					</c:if>
				</div>
				<div style="vertical-align: bottom;">
					<span class="titleright">${hotActivitys.viewTime.viewtimes}人参加</span>
				</div>
			</div>
		</div>
	</a>
	<input class="startDate" type="hidden" value='<fmt:formatDate value="${hotActivitys.startDate}" pattern="yyyy/MM/dd HH:mm:ss"/>' />
	<input class="endDate" type="hidden" value='<fmt:formatDate value="${hotActivitys.endDate}" pattern="yyyy/MM/dd  HH:mm:ss" />' />
</c:forEach>


<script type="text/javascript">
	$(function() {
		setInterval("timeChange()", 1000);
	})

	//倒计时函数
	function timeChange() {
		//开始时间
		var date1 = $(".startDate").val();
		var begintime_ms = Date.parse(new Date(date1.replace(/-/g, "/"))); //begintime 为开始时间 

		//结束时间
		var date2 = $(".endDate").val();
		var endtime_ms = Date.parse(new Date(date2.replace(/-/g, "/"))); // endtime 为结束时间  

		//当前时间
		var nowtime_ms = Date.parse(new Date()); // endtime 为结束时间  

		//相差时间
		var date3;

		var suffix;

		if (begintime_ms > nowtime_ms) {
			date3 = begintime_ms - nowtime_ms;
			suffix = "&nbsp;开始";
		} else if (begintime_ms < nowtime_ms && nowtime_ms < endtime_ms) {
			date3 = endtime_ms - nowtime_ms;
			suffix = "&nbsp;后结束";
		} else if (endtime_ms < nowtime_ms) {
			$(".timeChange").html("该活动已经结束");
			return;
		}

		//计算出相差天数  
		var days = Math.floor(date3 / (24 * 3600 * 1000))

		//计算出小时数  

		var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数  
		var hours = Math.floor(leave1 / (3600 * 1000))

		//计算相差分钟数  
		var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数  
		var minutes = Math.floor(leave2 / (60 * 1000))

		//计算相差秒数  
		var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数  
		var seconds = Math.round(leave3 / 1000)
		if (days != 0) {
			$(".timeChange").html(
					days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
							+ suffix);
		} else if (hours != 0) {
			$(".timeChange").html(
					hours + "小时" + minutes + "分钟" + seconds + "秒" + suffix);
		} else if (minutes != 0) {
			$(".timeChange").html(minutes + "分钟" + seconds + "秒" + suffix);
		} else if (seconds != 0) {
			$(".timeChange").html(seconds + "秒" + suffix);
		}
	}

	function toDetail() {
		var id = $("#id").val();
		var leastReward = $("#leastReward").val();
		var dateBetween = $("#dateBetween").val();
		if (dateBetween == "0" || leastReward <= 0) {
			alert("该活动已结束！");
		} else {
			var signs = $("#signs").val();
			if (signs == "-") {
				alert("该活动暂为开始！")
			} else if (signs == "+") {
				var actiUrl = $("#actiUrl").val();
				window.location.href = actiUrl + "?id=" + id;
			}
		}
	}
</script>
	
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/jqweui.jsp"%>
<%@ include file="/WEB-INF/views/shared/scripts/tabmob.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/weContentFooter.jsp"%>

